<template>
  <div class="user-detail">
    <MainHeader :showLeft="true" />
    <div class="user-dettail-content">
      <Swiper :info="info" />
      <BaseInfo :info="info" />
      <template>
        <UserInfoCard
          v-for="(card, idx) in cards"
          :key="idx"
          :info="card"
        />
      </template>
    </div>
  </div>
</template>

<script>
import Swiper from './user-detail/swiper.vue'
import BaseInfo from './user-detail/base-info.vue'
import UserInfoCard from './user-detail/info-card.vue'
import * as apis from './api'
export default {
  name: 'UserDetail',
  components: {
    Swiper,
    BaseInfo,
    UserInfoCard
  },
  data() {
    return {
      cards: [
        {
          title: '个人介绍：',
          content: '*',
          key: 'personalIntro',
        },
        {
          title: '家庭情况：',
          content: '*',
          key: 'familyIntro',
        },
        {
          title: '感情观：',
          content: '*',
          key: 'loveIntro',
        }
      ],
      info: {}
    }
  },
  methods: {
    /**
     * @desc 加载信息
     */
    async loadInfo() {
      let { query } = this.$route
      let res = await apis.getDetail(query)
      
      if (res && res.code == '200') {
        this.info = res.data

        let list = this.cards.map(item => {
          return {
            ...item,
            content: res.data[item.key] || '未知'
          }
        })
        this.cards = JSON.parse(JSON.stringify(list))
      }
    }
  },
  created() {
    this.loadInfo()
  }
}
</script>

<style lang="less" scoped>
.user-detail{
  .user-dettail-content{
    overflow: auto;
    padding-bottom: 40px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
  }
  .base-info{
    margin-top: -40px;
    position: relative;
    z-index: 1;
  }
}
</style>
<style lang="less">
.user-detail {
  .van-swipe {
    &__indicators {
      transform: translate(-50%, -20px);
    }
  }
}
</style>